<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
        .aui-list-item.wechat-top {
            background-color: #f3f3f7;
        }
        .aui-list .wechat-avatar {
            width:3rem;
        }
        .wechat-avatar .aui-row-padded {
            background-color: #dddee0;
            padding: 0.1rem;
            border-radius: 0.2rem;
            margin-left: -0.05rem;
            margin-right: -0.05rem;
        }
        .wechat-avatar .aui-row-padded [class*=aui-col-xs-] {
            padding: 0.05rem;
        }
        .wechat-avatar,
        .wechat-avatar > img {
            border-radius:0.2rem;
        }
    </style>
</head>
<body>
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-media-list">
            <li class="aui-list-item wechat-top">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mobile"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        Mac 微信已登录
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle wechat-top">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media wechat-avatar">
                        <div class="aui-badge">9</div>
                        <div class="aui-row-padded">
                            <div class="aui-col-xs-4">
                                <img src="../image/demo1.png" />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src="../image/demo2.png" />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src="../image/demo3.png" />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src="../image/demo4.png" />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src="../image/demo5.png" />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src="../image/demo6.png" />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src="../image/demo1.png" />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src="../image/demo3.png" />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src="../image/demo5.png" />
                            </div>
                        </div>
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title">AUI微信开发交流群</div>
                            <div class="aui-list-item-right">08:00</div>
                        </div>
                        <div class="aui-list-item-text aui-font-size-12">
                            流浪男:欢迎使用AUI 2.0
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle wechat-top">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media wechat-avatar">
                        <div class="aui-row-padded">
                            <div class="aui-col-xs-6">
                                <img src="../image/demo2.png" />
                            </div>
                            <div class="aui-col-xs-6">
                                <img src="../image/demo3.png" />
                            </div>
                            <div class="aui-col-xs-6">
                                <img src="../image/demo1.png" />
                            </div>
                            <div class="aui-col-xs-6">
                                <img src="../image/demo5.png" />
                            </div>
                        </div>

                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title">AUI 2.0讨论组</div>
                            <div class="aui-list-item-right">08:00</div>
                        </div>
                        <div class="aui-list-item-text aui-font-size-12">
                            AUI:官方网站 www.auicss.com
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media wechat-avatar">
                        <div class="aui-badge">9</div>
                        <img src="../image/demo5.png" />
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title">流浪男</div>
                            <div class="aui-list-item-right">星期一</div>
                        </div>
                        <div class="aui-list-item-text aui-font-size-12">
                            Hello AUI 2.0!
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media wechat-avatar">
                        <img src="../image/demo1.png" />
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title">张三</div>
                            <div class="aui-list-item-right">1天前</div>
                        </div>
                        <div class="aui-list-item-text aui-font-size-12">
                            Hello AUI 2.0!
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media wechat-avatar">
                        <div class="aui-dot"></div>
                        <img src="../image/demo4.png" />
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title">李四</div>
                            <div class="aui-list-item-right">星期一</div>
                        </div>
                        <div class="aui-list-item-text aui-font-size-12">
                            Hello AUI 2.0!
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript">
</script>
</html>